<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<!-- Preloader -->
<style>
    @keyframes hidePreloader {
        0% {
            width: 100%;
            height: 100%;
        }

        100% {
            width: 0;
            height: 0;
        }
    }

    body > div.preloader {
        position: fixed;
        background: white;
        width: 100%;
        height: 100%;
        z-index: 1071;
        opacity: 0;
        transition: opacity .5s ease;
        overflow: hidden;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:not(.loaded) > div.preloader {
        opacity: 1;
    }

    body:not(.loaded) {
        overflow: hidden;
    }

    body.loaded > div.preloader {
        animation: hidePreloader .5s linear .5s forwards;
    }
</style>
<!-- Quick CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='front/css/vender/quick-website.css') }}" id="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='front/css/login.css') }}">

<body>
<!-- Preloader 页面加载效果 -->
    <div class="preloader">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
{#弹窗#}
<div id="liveAlertPlaceholder" class="justify-content-center col-12 position-fixed"></div>
{#注册表单部分#}
    <div class="full-page-wrapper">
      <div class="content-wrapper d-flex align-items-center vh-100">
        <div class="row w-100 mx-0 my-0">
          <div class="col-lg-auto mx-auto">
            <div class="auth-form-light text-left py-5 px-4 px-sm-5">
              <div class="brand-logo pt-4 pb-4">
                <img src="../../../static/front/images/logo.png" height="42" alt="logo">
              </div>
              <h4>注册属于你的账号！</h4>
              <form  class="pt-3 needs-validation" id="myform" novalidate>
                  <div class="form-group">
                      <input type="text" class="form-control" id="username" name="username" placeholder="用户名/昵称" required>
                      <div class="valid-feedback">
                          用户名/昵称Looks good!
                      </div>
                      <div class="invalid-feedback">
                          请输入用户名/昵称！
                      </div>
                  </div>
                  <div class="form-group">
                      <input type="text" class="form-control" id="phone" name="phone" maxlength="11" placeholder="账号/手机号" required>
                      <div class="valid-feedback">
                          账号/手机号Looks good!
                      </div>
                      <div class="invalid-feedback">
                          请输入账号
                      </div>
                  </div>
                  <div class="form-group">
                      <input type="password" class="form-control" id="password" name="password" placeholder="输入密码" required>
                      <div class="valid-feedback">
                          Looks good!
                      </div>
                      <div class="invalid-feedback">
                          请输入密码！
                      </div>
                  </div>
                  <div class="form-group">
                      <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="确认密码" required>
                      <div class="valid-feedback">
                          Looks good!
                      </div>
                      <div class="invalid-feedback">
                          密码不一致,请重新输入密码！
                      </div>
                  </div>
                <div class="my-0 d-flex justify-content-between align-items-center">
                    <div class="form-check w-100">
                        <label class="form-check-label text-muted"  style="height: 24px; line-height: 24px">
                            <input type="checkbox" class="form-check-input" id="agree" checked>
                            同意所有隐私 &amp; 情况
                        </label>
                        <label class="ml-8 pl-5">
                            <span class="text-muted" id="reset">重置表单</span>
                        </label>
                    </div>
                </div>
                <div>
                  <button class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" type="submit" id="register">注册</button>
                </div>
                <div class="text-center mt-4 font-weight-light">
                  有账号了? <a href="{{ url_for('login.login') }}" class="text-primary">去登录</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
    </div>
<script>
    // 登录加载
    window.addEventListener("load", function() {
        setTimeout(function() {
            document.querySelector('body').classList.add('loaded');
        }, 300);
    });
    // 重置表单
    document.getElementById('reset').addEventListener('click', function(){
        document.getElementById('myform').reset();
    });
   // 表单验证
    (() => {
        'use strict'

        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        const forms = document.querySelectorAll('.needs-validation')
        // Loop over them and prevent submission
        Array.from(forms).forEach(form => {
            form.addEventListener('submit', event => {
                // 如果表单验证失败，阻止提交并添加Bootstrap验证样式
                if (!form.checkValidity()) {
                    event.preventDefault() // 阻止表单提交
                    event.stopPropagation() // 阻止冒泡行为
                    form.classList.add('was-validated'); // 添加Bootstrap验证样式
                }else {
                    // 获取密码和确认密码的输入元素
                    const passwordInput = document.getElementById('password');
                    const confirmPasswordInput = document.getElementById('confirm_password');
                    console.log(passwordInput.value,confirmPasswordInput.value)
                    // 检查密码和确认密码是否匹配
                    if (passwordInput.value !== confirmPasswordInput.value) {
                        event.preventDefault(); // 阻止表单提交
                        form.classList.add('was-validated'); // 添加Bootstrap验证样式
                        passwordInput.value = '';
                        confirmPasswordInput.value = '';
                    } else {
                        // 如果密码匹配，执行注册逻辑
                      event.preventDefault(); // 阻止表单默认提交行为
                      const formData = new FormData(form); // 创建FormData对象

                        // 使用fetch发送异步请求
                        fetch('/register', { // 使用硬编码的URL（或使用form.action获取action属性）
                            method: 'POST',
                            body: formData,
                        })
                            .then(response => {
                                if (response.ok) { // 检查响应状态
                                    return response.json(); // 解析JSON响应
                                } else {
                                    throw new Error('注册失败：' + response.status); // 如果响应不成功，抛出错误
                                }
                            })
                            .then(data => {
                                if (data.success|| data.code === 200) {
                                    alert('注册成功！');
                                    form.classList.remove('was-validated');
                                    form.reset(); // 重置表单

                                } else {
                                    console.log(data);
                                    alert(data.msg || '注册失败，请稍后重试。');
                                }
                            })
                            .catch(error => {
                                // 网络或请求失败的处理
                                alert('注册失败：' + error.message);
                            });
                    }
                }
            }, false);
         });
    })();

</script>
</body>
</html>


<!--{#用于请求验证#}-->

<!--{#(() => {#}-->
<!--{#    'use strict';#}-->
<!--{##}-->
<!--{#    // 获取所有需要自定义Bootstrap验证样式的表单#}-->
<!--{#    const forms = document.querySelectorAll('.needs-validation');#}-->
<!--{##}-->
<!--{#    Array.from(forms).forEach(form => {#}-->
<!--{#        form.addEventListener('submit', event => {#}-->
<!--{#            event.preventDefault();#}-->
<!--{#            if (form.checkValidity()) {#}-->
<!--{#                // 表单数据收集#}-->
<!--{#                const formData = new FormData(form);#}-->
<!--{#                // 使用fetch发送AJAX请求#}-->
<!--{#                fetch('您的服务器端注册接口URL', {#}-->
<!--{#                    method: 'POST', // 或者 'GET'，根据实际情况#}-->
<!--{#                    body: formData#}-->
<!--{#                })#}-->
<!--{#                .then(response => {#}-->
<!--{#                    if (response.ok) {#}-->
<!--{#                        return response.json(); // 或者 response.text()，取决于服务器返回的数据类型#}-->
<!--{#                    }#}-->
<!--{#                    throw new Error('Network response was not ok.');#}-->
<!--{#                })#}-->
<!--{#                .then(data => {#}-->
<!--{#                    // 请求成功，处理服务器返回的数据#}-->
<!--{#                    console.log(data);#}-->
<!--{#                    alert("注册成功！");#}-->
<!--{#                    // 这里可以添加其他代码，比如清除表单、重定向等#}-->
<!--{#                })#}-->
<!--{#                .catch(error => {#}-->
<!--{#                    // 处理错误情况#}-->
<!--{#                    console.error('There was a problem with the fetch operation:', error);#}-->
<!--{#                    alert("注册失败，请稍后重试。");#}-->
<!--{#                });#}-->
<!--{#            }#}-->
<!--{#            form.classList.add('was-validated');#}-->
<!--{#        }, false);#}-->
<!--{#    });#}-->
<!--{#})();#}-->